// 高级版的todolist
import React from 'react'

class App extends React.Component{
    constructor(){
        super()
        this.state = {
            input:'',
            list:[{date:'2021-4-4 16:37'},{text:'今天我要写一个很厉害的东西'}]
        }
    }
    changeInput = ({target})=>{
        this.setState({
            input:target.value
        })
    }
    pushList = ()=>{
        let list = [...this.state.list,{date:new Date().toLocaleString(),text:this.text}]
        this.setState({
            list
        })
    }   
    serach = ()=>{
        //模糊匹配
        const d = this.state.list.filter((item)=>item.text.search(this.state.input))
        alert(d[0].text)
    }
    render(){
        return<>
        {/* 输入的头部 */}
        <div>
            <input onChange={this.changeInput} value={this.state.input} type="text"/><button onClick>提交</button>
        </div>
        {/* 搜索 */}
        <button onClick={this.serach}>搜索</button>
        {/* 展示 */}
        <ul>
            {
                this.state.list.map(({date,text})=>{
                    return <li key={date}>
                        {text}
                    </li>
                })
            }
        </ul>
        </>
    }
}


export default App